<template>
  <!-- 搜索区域 -->
  <el-row :gutter="20">
    <el-col :span="6" :offset="0">
      <el-select v-model="fnjiType" placeholder="请选择分类">
        <el-option label="家具" value="1" />
        <el-option label="家居" value="2" />
      </el-select>
    </el-col>
    <el-col :span="6" :offset="0">
      <el-input
        v-model="searchName"
        placeholder="请输入商品名称"
        size="normal"
        clearable
      ></el-input>
    </el-col>
    <el-col :span="4" :offset="0">
      <el-button type="primary" size="default" @click="handleSearch">
        查询
      </el-button>
    </el-col>
  </el-row>

  <!-- 商品列表 -->
  <el-row :gutter="20">
    <el-col
      v-for="(item, index) in prodList"
      :key="item.objectId"
      :span="6"
      :offset="0"
    >
      <el-card style="max-width: 480px">
        <template #header>
          <div class="card-header">
            <span class="title">{{ item.name }}</span>
          </div>
        </template>
        <el-image
          :src="'https://omsv2-static.fnji.com/' + item.picLeft"
          fit="fill"
          :lazy="true"
        ></el-image>

        <template #footer>
          <el-tag :type="item.fnjiType == 1 ? 'primary' : 'danger'">
            {{ item.fnjiType == 1 ? "家具" : "家居" }}
          </el-tag>
          <el-tag type="success">{{ item.category }}</el-tag>
          <el-button type="primary" size="small" @click="handleEdit(item)">
            编辑
          </el-button>
        </template>
      </el-card>
    </el-col>
  </el-row>

  <!-- 弹窗 -->
  <el-dialog v-model="dialogVisible" title="编辑商品" width="500">
    <el-input
      v-model="name"
      placeholder=""
      size="normal"
      clearable
      @change=""
    ></el-input>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="handleUpdate"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 分页 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[12, 24, 36, 48]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import { ref } from "vue";
import { productGet, productPut } from "../../api/zsf_product";

//分页
const total = ref(0); //数据总数
const currentPage = ref(1); //当前选中的页码
const pageSize = ref(12); //每页数量

const handleCurrentChange = async (page) => {
  console.log("当前选中页码", page);
  let res = await productGet(page, pageSize.value);
  prodList.value = res.data.results;
};
const handleSizeChange = async (size) => {
  console.log("当前每页数量", size);
  let res = await productGet(currentPage.value, size);
  prodList.value = res.data.results;
};

//商品列表渲染
const prodList = ref([]);
let res = await productGet();
console.log("商品数据", res);
let { results, count } = res.data; //必须要先开启接口计数，才有count。解构赋值语法
prodList.value = results;
total.value = count;

//编辑
const dialogVisible = ref(false);
const name = ref(""); //记录等待编辑的商品名称
const id = ref(""); //点击编辑按钮的时候记录被编辑的商品obejctId
//编辑按钮
const handleEdit = (item) => {
  //item是完整商品数据对象
  dialogVisible.value = true;
  name.value = item.name;
  id.value = item.objectId;
};

//确认按钮
const handleUpdate = async () => {
  //关闭弹窗
  dialogVisible.value = false;
  //发起更新请求
  await productPut(id.value, { name: name.value });
  //修改本地prodList数据包
  for (let i = 0; i < prodList.value.length; i++) {
    if (prodList.value[i].objectId == id.value) {
      prodList.value[i].name = name.value;
      break;
    }
  }
};

//搜索
const fnjiType = ref("");
const searchName = ref('') //模糊查询，记录用户输入的商品名称
const handleSearch = async () => {
  let res = await productGet(currentPage.value, pageSize.value, {
    fnjiType: Number(fnjiType.value),
    name:searchName.value
  });
  prodList.value = res.data.results;
  total.value = res.data.count;
};




</script>

<style lang="scss" scoped>
/* 文本溢出显示省略号 */
.title {
  display: block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-col {
  margin-bottom: 20px;
}
</style>
